@import "_base.scss";

header{
    width: vw(750);
    height: vw(150);
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position:fixed;
        position:start;
        top:0;
        z-index:150;
    .searchbox{
        width: vw(705);
        height: vw(150);
        // background-color: skyblue;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        .search_conter_logo{
                    
            img{
                width: vw(123);
                height: vw(123);
            }
            
        }
    .search_conter{
            
        
       .shuru{
       width: vw(266);
       height: vw(51); 
       color: #777777;
       font-family: MicrosoftYaHei;
	   font-size: vw(24);
	   line-height: vw(46);
       margin-left: 2em;
    }
    .xiala{
        width: vw(159);
       height: vw(56); 
	font-family: MicrosoftYaHei;
	font-size: vw(26);
	
	color: #000000;
    }
    img{
        height: 100%;
        width: 100%;
       
    }
}
    }
}
// 头部
// 身体
main{
    margin-top: vw(160);
   
.box {
    width: vw(750);
    height: vw(287);
    overflow: hidden;
    margin: auto;
    
    
}
.ba {
    width: vw(1600);
    position: relative;
    
}
.red, .green, .blue, .red-end{
    text-align: center;
    line-height: vw(200);
    width: vw(400);
    height: vw(200);
    /* display: inline-block; */
    animation: moev 8s ease infinite;
}
.red {
    /* float: left; */
    
    position: absolute;
    
}
.green {
    
    position: absolute;
    left: vw(400);
}
.blue {
    
    position: absolute;
    left:vw(800);
}
.red-end {
    /* float: left; */
    
    position: absolute;
    left: vw(1200);
}
@keyframes moev {
    0%, 15% {
        margin-left: vw(0);
    }
    30%, 45% {
        margin-left: vw(-400);
    }
    60%, 75% {
        margin-left: vw(-800);
    }
    100% {
        margin-left: vw(-1200);
    }
}
.discount_buying_2{
    width: vw(708);
    height: vw(60);
    // background-color:red;
    margin: auto;
    display: flex;
        justify-content:space-between;
        flex-direction:row;
    .dc_3{
        width: vw(200);
        height: vw(60);
        // background-color: #87ceeb;
        display: flex;
        
        justify-content:center;
        img{
        width: vw(55);
        height: vw(49);
        }
        span{
            line-height:vw(60);
            margin-left: vw(8);
	font-family: MicrosoftYaHei;
	font-size: vw(30);
    }
}
   .dc_4{
    width: vw(180);
    height: vw(60);
    // background-color: #87ceeb;
    display: flex;
    flex-direction:row;
    justify-content:flex-end;

    img{
    width: vw(25);
    height: vw(26);
    margin-top: vw(17);
    }
    span{
        line-height:vw(60);
font-family: MicrosoftYaHei;
font-size: vw(24);

color: #000000;
margin-right: vw(8);
    }
   }
}
.discount_buying{
    width: vw(750);
    height: vw(350);
    background-color: #fff;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    .discount_content_1{
        width: vw(708);
    height: vw(60);
    // background-color:skyblue;
    display: flex;
    justify-content: space-between;
     .dc_ct{
        width: vw(200);
        height: vw(60);
        // background-color: red;
        display: flex;
        img{
            width: vw(56);
        height: vw(54);
        }
        span{
            line-height:vw(60);
            margin-left: vw(8);
	font-family: MicrosoftYaHei;
	font-size: vw(30);
	
	
	color: #000000;
        }
     }
     .dc_ct_2{
        width: vw(180);
        height: vw(60);
        // background-color: red;
        display: flex;
        justify-content: flex-end;
        img{
        width: vw(25);
        height: vw(26);
        margin-top: vw(17);
        }
        span{
            line-height:vw(60);
	font-family: MicrosoftYaHei;
	font-size: vw(24);
	
	color: #000000;
    margin-right: vw(8);
        }
     }
    }
    .discount_conten_2t{
    width: vw(708);
    height: vw(290);
    // background-color: yellow;
    display: flex;
    
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    img{
        width:vw(241);
        height: vw(94);
    }
    }
    
    

}
.guess_like{
    width: vw(708);
    height: vw(60);
    // background-color:skyblue;
    margin:auto;
    
}
.like_conten{
    width: vw(180);
    height: vw(60);
    // background-color: red;
    display: flex;
}

.like_conten img{
    
    }
    .like_conten span{
        font-size:vw(12);
        line-height: vw(60);
    }
  .shop_bottom{
      width: vw(717);
      height: vw(190);
    //   background-color: green;
      
      display: flex;
      flex-direction:row;
      justify-content:space-around;
      img{
          width: 100%;
          height: 100%;
      }
  }
  .shop_logo{
      width: vw(211);
      height: vw(164);
    //   background-color: skyblue;
  }
  .shop_text{
      width: vw(480);
      height: vw(164);
    //   background-color: yellow;
      display: flex;
      flex-direction:column;
      justify-content:space-around;
  }
.text_center{
    width: vw(484);
    height: vw(31);
    // background-color: pink;
    display: flex;
   
    justify-content:space-between;
    .text_information_1{
        width: vw(270);
        height: vw(31);
        // background-color: yellow;
    }
    .text_information_2{
        width: vw(270);
        height: vw(31);
        // background-color: red;
    }
    .text_information{
        width: vw(214);
        height: vw(31);
        // background-color: red;
        display: flex;
        justify-content: flex-end;
    }
    span{
       
	font-family: MicrosoftYaHei;
	font-size: vw(30);
	line-height: vw(31);
	
	color: #000000;
    }
    p{
	font-family: MicrosoftYaHei;
	font-size: vw(22);
	line-height: vw(39);
	color: #494949;
    line-height: vw(31)
    }
}
}
// 脚部
footer{
    width: vw(750);
    height: vw(150);
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position:fixed;
        position:start;
        bottom:0;
        z-index:10;
    .bottom_classification{
         width: vw(652);
         height: vw(107);
        //  background-color: pink;
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         text-align: center;
	font-family: MicrosoftYaHei;
	font-size: vw(26);
	color: #000000;
         img{
             width: 100%;
             height: 100%;
         }
        }
        .classification_center{
            width: vw(75);
            height: vw(100);
            // background-color: red;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
}
.classification_picture{
    width: vw(704);
    height: vw(260);
    margin: auto;
    // background-color: yellow;
}
.swiper-container {
    width: vw(700);
    height: vw(260);
} 
.a {
    // background-color: aqua;
    display:flex;
    justify-content:space-around;
    
    .tu_neirong{
        width: vw(750);
        height: vw(281);
    }
    img{
        width: 100%;
        height: 100%;
    }
}
.b {
    // background-color: pink;
    @extend .a
}
.c {
    // background-color: purple;
    @extend .a
}
.gundong{
    overflow: hidden;
}
